.container {
  @apply absolute top-0 bottom-0 leading-[1.8];

  left: -1.4rem;
  transform: translateX(-100%);
  font-family: var(--sans-font);

  color: var(--shizuku-text-color);
}

.list {
  @apply sticky truncate;

  top: 50vh;
  transform: translateY(-50%);
  width: calc(10rem + 12px);
  max-height: calc(100vh - 20em);

  li {
    @apply truncate;
  }
}

.item {
  @apply opacity-60 text-left;

  width: 10rem;
  transition: opacity 0.5s, margin 0.5s, color 0.5s;
  font-variant-numeric: tabular-nums;

  &.active {
    @apply opacity-100 ml-2;
  }
}

@screen tablet {
  .container {
    @apply hidden;
  }
}
